import moment from 'moment';
import React, { useEffect, useState } from 'react';
import cpnstyles from './cpnstyles.less';

const TimeHeader = (props: { username: string }) => {
  const { username } = props;
  const [timeStr, setTimeStr] = useState(moment().format('YYYY年M月DD日 dddd HH:mm'));
  useEffect(() => {
    const timer = setInterval(() => {
      setTimeStr(moment().format('YYYY年M月DD日 dddd HH:mm'));
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);
  return (
    <div className={cpnstyles.timeheader}>
      {timeStr} <i className={cpnstyles.iconUser} />{' '}
      <span className={cpnstyles.userInfo}>您好! {username}</span>
    </div>
  );
};
export default TimeHeader;
